<template>
  <div>
    <el-card style="margin-bottom: 50px">
      <el-form :model="formData" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="单号:">
              <el-input v-model="formData.oddNumbers" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标题:">
              <el-input v-model="formData.title" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="完成情况:">
              <el-select v-model="formData.completionStatus">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任务描述:">
              <el-input v-model="formData.taskDescription" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="承接人:">
              <el-input v-model="formData.undertaker" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="交办时间:">
              <el-date-picker
                v-model="formData.assignmentTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane :label="`我发起的交办(${initiateNum})`" name="first" />
        <el-tab-pane :label="`我承接的交办(${UndertakNum})`" name="second" />
      </el-tabs>
      <div v-if="activeName === 'first'">
        <pure-table
          :data="tableData"
          :columns="columns"
          stripe
          :header-cell-style="{
            background: '#eff2fb',
            color: 'var(--el-text-color-primary)'
          }"
        >
          <template #operation="{ row }">
            <el-button link type="primary">查看详情</el-button>
          </template>
          <template #expand="{ row }">
            <div>
              <pure-table
                style="width: 92%; margin-left: 125px"
                :data="row.child"
                stripe
                :header-cell-style="{
                  background: '#ccd3e6',
                  color: 'var(--el-text-color-primary)'
                }"
                :columns="childColumns"
              >
                <template #operation2="{ row }">
                  <el-button link type="primary" @click="checkDetail(row)"
                    >详情</el-button
                  >
                  <el-button link type="danger">撤回</el-button>
                </template>
              </pure-table>
            </div>
          </template>
        </pure-table>
      </div>
      <div v-if="activeName === 'second'">
        <pure-table
          :data="tableData2"
          :columns="columns2"
          row-key="id"
          stripe
          :header-cell-style="{
            background: '#eff2fb',
            color: 'var(--el-text-color-primary)'
          }"
        >
          <template #operation="{ row }">
            <el-button link type="primary">查看详情</el-button>
          </template>
        </pure-table>
      </div>
      <el-pagination
        class="pagination"
        :current-page="listPageObj.currentPage"
        :page-size="listPageObj.pageSize"
        :page-sizes="[10, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listPageObj.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <TaskListDetail ref="taskListDetail" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import TaskListDetail from "./dialog/taskListDetail.vue";

const taskListDetail = ref(null); //定义子组件
const activeName = ref("first");
const initiateNum = 0;
const UndertakNum = 1;
const formData = reactive({
  oddNumbers: "",
  title: "",
  completionStatus: "",
  taskDescription: "",
  undertaker: "",
  assignmentTime: ref("")
});
const tableData = [
  {
    oddNumbers: "666666",
    formName: "Tom",
    index: "1",
    documentTitle: "aasd",
    assignmentTime: "2023-01-01",
    taskDescription: "xxxxx",
    undertaker: "阿海",
    isComplete: "是",
    child: [
      {
        index: "1-1",
        documentTitle: "aasd",
        undertaker: "Jerry",
        organization: "California",
        completionStatus: "未完成"
      }
    ]
  }
];
const tableData2 = [
  {
    id: 1,
    index: "1",
    oddNumbers: "569874123",
    documentTitle: "88888",
    formName: "ahai",
    assignmentTime: "2023-04-20",
    processingTime: "2020-01-01",
    taskDescription: "sdqdqw",
    promoter: "qweqw",
    isComplete: "否"
  }
];
const options = [
  {
    value: "1",
    label: "全部"
  },
  {
    value: "2",
    label: "已完成"
  },
  {
    value: "3",
    label: "未完成"
  }
];
const listPageObj = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
const columns: TableColumnList = [
  {
    type: "expand",
    slot: "expand"
  },
  {
    label: "序号",
    prop: "index",
    width: "80"
  },
  {
    label: "单号",
    prop: "oddNumbers"
  },
  {
    label: "表单名称",
    prop: "formName"
  },
  {
    label: "单据标题",
    prop: "documentTitle"
  },
  {
    label: "交办时间",
    prop: "assignmentTime"
  },
  {
    label: "任务描述",
    prop: "taskDescription"
  },
  {
    label: "承接人",
    prop: "undertaker"
  },
  {
    label: "是否完成",
    prop: "isComplete"
  },
  {
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation"
  }
];
const columns2: TableColumnList = [
  {
    label: "序号",
    prop: "index",
    width: "80"
  },
  {
    label: "单号",
    prop: "oddNumbers"
  },
  {
    label: "表单名称",
    prop: "formName"
  },
  {
    label: "单据标题",
    prop: "documentTitle"
  },
  {
    label: "交办时间",
    prop: "assignmentTime"
  },
  {
    label: "发起时间",
    prop: "processingTime"
  },
  {
    label: "任务描述",
    prop: "taskDescription"
  },
  {
    label: "发起人",
    prop: "promoter"
  },
  {
    label: "是否完成",
    prop: "isComplete"
  }
];
const childColumns: TableColumnList = [
  {
    label: "序号",
    prop: "index",
    width: "80"
  },
  {
    label: "承接人",
    prop: "undertaker"
  },
  {
    label: "组织机构",
    prop: "organization"
  },
  {
    label: "完成情况",
    prop: "completionStatus"
  },
  {
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation2"
  }
];

function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
}

const checkDetail = row => {
  taskListDetail.value.dialogVisible = true;
  taskListDetail.value.setData(row);
};
</script>

<style scoped>
.pagination {
  justify-content: flex-end !important;
  margin-top: 30px;
}
</style>
